<template>
    <div>
        <el-card>
            <div class="mt10 mb20">
                <el-button type="primary" icon="el-icon-plus"  @click="handleEdit()" :disabled="loading">新增保司结算方案</el-button>
                <el-button raw-type="button" icon="el-icon-circle-plus-outline" @click="addCol">添加结算类型</el-button>
            </div>
            <el-table class="sd" stripe border :data="tableData" v-loading="loading">
                <el-table-column align="center" prop="safeName" label="保险公司名称"></el-table-column>
                <el-table-column align="center" prop="bouns" label="奖励金结算单价"></el-table-column>
                <el-table-column align="center" prop="totalC" label="渠道结算费率"></el-table-column>
                <el-table-column align="center" prop="telServiceC" label="技术服务费率"></el-table-column>
                <template v-for="(item, index) in cols">
                    <el-table-column :label="item.label" :key="index" :prop="item.prop"></el-table-column>
                </template>
                <el-table-column align="center" prop="isUse" label="是否生效">
                    <template slot-scope="scope">
                        <el-button type="text" :class="scope.row.isUse === '生效' ? 'success' : 'error'">{{scope.row.isUse}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="date" label="最后修改时间"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" @click="handleDelete(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="tpl-mg-t mt20 fr mb20"
                            small
                            @size-change="pageSizeChange"
                            @current-change="pageCurrentChange"
                            :current-page="queryForm.pageNum"
                            :page-sizes="[10, 20, 30, 40, 50, 100]"
                            :page-size="queryForm.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                            style="margin-bottom: 5px">
            </el-pagination>
        </el-card>
        <el-card>
            <div class="mt10 mb20">
                <el-button type="primary" icon="el-icon-plus" @click="handleEdit2()" :disabled="loading">新增车厂结算方案</el-button>
                <el-button raw-type="button" icon="el-icon-circle-plus-outline" @click="addCol2">添加结算类型</el-button>
            </div>
            <el-table class="sd" stripe border :data="tableData2" v-loading="loading">
                <el-table-column align="center" prop="safeName" label="车厂名称"></el-table-column>
                <el-table-column align="center" prop="bouns" label="奖励金结算单价"></el-table-column>
                <el-table-column align="center" prop="totalC" label="数据使用结算费率"></el-table-column>
                <template v-for="(item, index) in cols2">
                    <el-table-column :label="item.label" :key="index" :prop="item.prop"></el-table-column>
                </template>
                <el-table-column align="center" prop="isUse" label="是否生效">
                    <template slot-scope="scope">
                        <el-button type="text" :class="scope.row.isUse === '生效' ? 'success' : 'error'">{{scope.row.isUse}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="date" label="最后修改时间"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleEdit2(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" @click="handleDelete2(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="tpl-mg-t mt20 fr mb20"
                            small
                            @size-change="pageSizeChange"
                            @current-change="pageCurrentChange"
                            :current-page="queryForm.pageNum"
                            :page-sizes="[10, 20, 30, 40, 50, 100]"
                            :page-size="queryForm.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                            style="margin-bottom: 5px">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: 'settlementRules',
        data () {
            return {
                // 列表查询条件
                queryForm: {
                    brand: '',
                    activityTitle: '',
                    activityStatus: '',
                    activityId: '',
                    pageNum: 1,
                    pageSize: 10
                },
                cols: [
                    // {prop: 'date', label: '日期'},
                ],
                cols2: [],
                tableData: [],
                tableData2: [],
                userData: {},
                loading: false
            }
        },
        created () {
            this.queryList();this.addColByStorage();this.addColByStorage2();
        },
        computed: {
            total() {
                return this.tableData.length;
            }
        },
        methods: {
            handleEdit (i,r) {
                if(i != undefined || r != undefined){
                    this.$routerTo('editSettlement', { settlementData: r, type: 'edit', callback: this.queryList });
                }else{
                    this.$routerTo('editSettlement', { type: 'add', callback: this.queryList });
                }
            },
            handleEdit2 (i,r) {
                if(i != undefined || r != undefined){
                    this.$routerTo('editSettlement2', { settlementData2: r, type: 'edit', callback: this.queryList });
                }else{
                    this.$routerTo('editSettlement2', { type: 'add', callback: this.queryList });
                }
            },
            addCol(){
                let v1 = this.tableData[0].spareField2;
                let v2 = this.tableData[0].spareField4;
                let v3 = this.tableData[0].spareField6;
                if(v1 === "" && v2 === "" && v3 === ""){
                    this.$prompt('请输入结算名称', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPlaceholder: '// 例：技术服务费率',
                        inputPattern: /\S/,
                        inputErrorMessage: '结算名称不能为空'
                    }).then(({ value }) => {
                        this.tableData.forEach(item => {
                            item.spareField1 = value; item.spareField2 = '-';
                        });
                        this.$message({
                            type: 'success', message: '增加结算名称是: ' + value
                        });
                        const v = this.tableData[0].spareField1;
                        this.cols.push({prop: 'spareField2', label: v});
                        localStorage.setItem('settlementData', JSON.stringify(this.tableData));
                        this.queryList();
                    }).catch(() => {
                        this.$message({
                            type: 'info',  message: '取消输入'
                        });       
                    });
                }else if(v1 != "" && v2 === "" && v3 === ""){
                    this.$prompt('请输入结算名称', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPlaceholder: '// 例：技术服务费率',
                        inputPattern: /\S/,
                        inputErrorMessage: '结算名称不能为空'
                    }).then(({ value }) => {
                        this.tableData.forEach(item => {
                            item.spareField3 = value; item.spareField4 = '-';
                        });
                        this.$message({
                            type: 'success', message: '增加结算名称是: ' + value
                        });
                        const v = this.tableData[0].spareField3;
                        this.cols.push({prop: 'spareField4', label: v});
                        localStorage.setItem('settlementData', JSON.stringify(this.tableData));
                        this.queryList();
                    }).catch(() => {
                        this.$message({
                            type: 'info',  message: '取消输入'
                        });       
                    });
                }else if(v1 != "" && v2 != "" && v3 === ""){
                    this.$prompt('请输入结算名称', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPlaceholder: '// 例：技术服务费率',
                        inputPattern: /\S/,
                        inputErrorMessage: '结算名称不能为空'
                    }).then(({ value }) => {
                        this.tableData.forEach(item => {
                            item.spareField5 = value; item.spareField6 = '-';
                        });
                        this.$message({
                            type: 'success', message: '增加结算名称是: ' + value
                        });
                        const v = this.tableData[0].spareField5;
                        this.cols.push({prop: 'spareField6', label: v});
                        localStorage.setItem('settlementData', JSON.stringify(this.tableData));
                        this.queryList();
                    }).catch(() => {
                        this.$message({
                            type: 'info',  message: '取消输入'
                        });       
                    });
                }else{
                    this.$message({
                        type: 'info',  message: '最多添加三种规则哦~'
                    }); 
                }
            },
            addCol2(){
                let v1 = this.tableData2[0].spareField2;
                let v2 = this.tableData2[0].spareField4;
                let v3 = this.tableData2[0].spareField6;
                if(v1 === "" && v2 === "" && v3 === ""){
                    this.$prompt('请输入结算名称', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPlaceholder: '// 例：技术服务费率',
                        inputPattern: /\S/,
                        inputErrorMessage: '结算名称不能为空'
                    }).then(({ value }) => {
                        this.tableData2.forEach(item => {
                            item.spareField1 = value; item.spareField2 = '-';
                        });
                        this.$message({
                            type: 'success', message: '增加结算名称是: ' + value
                        });
                        const v = this.tableData2[0].spareField1;
                        this.cols2.push({prop: 'spareField2', label: v});
                        localStorage.setItem('settlementData2', JSON.stringify(this.tableData2));
                        this.queryList();
                    }).catch(() => {
                        this.$message({
                            type: 'info',  message: '取消输入'
                        });       
                    });
                }else if(v1 != "" && v2 === "" && v3 === ""){
                    this.$prompt('请输入结算名称', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPlaceholder: '// 例：技术服务费率',
                        inputPattern: /\S/,
                        inputErrorMessage: '结算名称不能为空'
                    }).then(({ value }) => {
                        this.tableData2.forEach(item => {
                            item.spareField3 = value; item.spareField4 = '-';
                        });
                        this.$message({
                            type: 'success', message: '增加结算名称是: ' + value
                        });
                        const v = this.tableData2[0].spareField3;
                        this.cols2.push({prop: 'spareField4', label: v});
                        localStorage.setItem('settlementData2', JSON.stringify(this.tableData2));
                        this.queryList();
                    }).catch(() => {
                        this.$message({
                            type: 'info',  message: '取消输入'
                        });       
                    });
                }else if(v1 != "" && v2 != "" && v3 === ""){
                    this.$prompt('请输入结算名称', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPlaceholder: '// 例：技术服务费率',
                        inputPattern: /\S/,
                        inputErrorMessage: '结算名称不能为空'
                    }).then(({ value }) => {
                        this.tableData2.forEach(item => {
                            item.spareField5 = value; item.spareField6 = '-';
                        });
                        this.$message({
                            type: 'success', message: '增加结算名称是: ' + value
                        });
                        const v = this.tableData2[0].spareField5;
                        this.cols2.push({prop: 'spareField6', label: v});
                        localStorage.setItem('settlementData2', JSON.stringify(this.tableData2));
                        this.queryList();
                    }).catch(() => {
                        this.$message({
                            type: 'info',  message: '取消输入'
                        });       
                    });
                }else{
                    this.$message({
                        type: 'info',  message: '最多添加三种规则哦~'
                    }); 
                }
            },
            addColByStorage(){
                let v1 = this.tableData[0].spareField2;
                let v2 = this.tableData[0].spareField4;
                let v3 = this.tableData[0].spareField6;
                if(v1 && v1 != ""){
                    const v = this.tableData[0].spareField1;
                    this.cols.push({prop: 'spareField2', label: v});
                }
                if(v2 && v2 != ""){
                    const v = this.tableData[0].spareField3;
                    this.cols.push({prop: 'spareField4', label: v});
                }
                if(v3 && v3 != ""){
                    const v = this.tableData[0].spareField5;
                    this.cols.push({prop: 'spareField6', label: v});
                }
            },
            addColByStorage2(){
                let v1 = this.tableData2[0].spareField2;
                let v2 = this.tableData2[0].spareField4;
                let v3 = this.tableData2[0].spareField6;
                if(v1 && v1 != ""){
                    const v = this.tableData2[0].spareField1;
                    this.cols2.push({prop: 'spareField2', label: v});
                }
                if(v2 && v2 != ""){
                    const v = this.tableData2[0].spareField3;
                    this.cols2.push({prop: 'spareField4', label: v});
                }
                if(v3 && v3 != ""){
                    const v = this.tableData2[0].spareField5;
                    this.cols2.push({prop: 'spareField6', label: v});
                }
            },
            handleDelete(i){
                this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let cData = JSON.parse(localStorage.getItem('settlementData'));
                    cData.splice(i,1)
                    localStorage.setItem('settlementData', JSON.stringify(cData));
                    this.queryList()
                    this.$message({
                        type: 'success', message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info', message: '已取消删除'
                    });          
                });
            },
            handleDelete2(i) {
                this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let cData = JSON.parse(localStorage.getItem('settlementData2'));
                    cData.splice(i,1)
                    localStorage.setItem('settlementData2', JSON.stringify(cData));
                    this.queryList()
                    this.$message({
                        type: 'success', message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info', message: '已取消删除'
                    });          
                });
            },
            // 查询列表
            queryList () {
                let cData = JSON.parse(localStorage.getItem('settlementData'));
                let cData2 = JSON.parse(localStorage.getItem('settlementData2'));
                if(!cData){
                    cData = [
                        {"index": "1","safeName": "阳光保险","bouns": "500","totalC": "10%","telServiceC": "5%","date": "2020-7-21 17:12:29","isUse": "生效","spareField1":'',"spareField2":"","spareField3":'',"spareField4":"","spareField5":'',"spareField6":""},
                        {"index": "2","safeName": "中国平安保险","bouns": "1000","totalC": "15%","telServiceC": "10%","date": "2020-7-21 17:12:29","isUse": "生效","spareField1":'',"spareField2":"","spareField3":'',"spareField4":"","spareField5":'',"spareField6":""},
                        {"index": "3","safeName": "中国人保","bouns": "1500","totalC": "20%","telServiceC": "15%","date": "2020-7-21 17:12:29","isUse": "未生效","spareField1":'',"spareField2":"","spareField3":'',"spareField4":"","spareField5":'',"spareField6":""},
                    ];
                }
                if(!cData2){
                    cData2 = [
                        {"index": "1","safeName": "吉利汽车","bouns": "500","totalC": "10%","telServiceC": "5%","date": "2020-7-21 17:12:29","isUse": "生效","spareField1":'',"spareField2":"","spareField3":'',"spareField4":"","spareField5":'',"spareField6":""},
                        {"index": "2","safeName": "长城汽车","bouns": "1000","totalC": "15%","telServiceC": "10%","date": "2020-7-21 17:12:29","isUse": "生效","spareField1":'',"spareField2":"","spareField3":'',"spareField4":"","spareField5":'',"spareField6":""},
                        {"index": "3","safeName": "东风汽车","bouns": "1500","totalC": "20%","telServiceC": "15%","date": "2020-7-21 17:12:29","isUse": "未生效","spareField1":'',"spareField2":"","spareField3":'',"spareField4":"","spareField5":'',"spareField6":""},
                    ];
                }
                this.tableData = cData;
                this.tableData2 = cData2;
                localStorage.setItem('settlementData', JSON.stringify(cData));
                localStorage.setItem('settlementData2', JSON.stringify(cData2));
            },
            // 每页显示条数
            pageSizeChange (val) {
                let pages = Math.ceil(this.total / val)
                this.queryForm.pageSize = val
                if (this.queryForm.pageNum > pages) {
                    this.queryForm.pageNum = 1
                }
                this.queryList()
            },
            // 当前页码
            pageCurrentChange (val) {
                this.queryForm.pageNum = val
                this.queryList()
            },
            exportFile () {
                if(this.CustomerForm.birthday[0] || this.CustomerForm.vCode != "" || this.CustomerForm.bsType !== "" || this.CustomerForm.bxType !== "" || this.CustomerForm.zjType !== ""){
                    this.$message({ type: 'success', message: `导出成功!` })
                }else{
                    this.$message.warning('请先选择筛选条件！')
                }
                // let params = { ...this.form }
                // for (let key in params) {
                //     if (params[key] === '' || params[key].length === 0) {
                //         delete params[key]
                //     }
                // }
                // if (this.form.dateRange && this.form.dateRange.length === 2) {
                //     params.tssTimeStart = this.form.dateRange[0]
                //     params.tssTimeEnd = this.form.dateRange[1]
                // } else {
                //     this.$message.warning('请选择发生日期范围')
                //     return
                // }
                // /* 请求部分 */
                // let config = {
                //     headers: {}
                // }
                // let token = window.localStorage.getItem('token') || null
                // let account = window.localStorage.getItem('account') || null
                // if (token) {
                //     config.headers['Token'] = token
                //     config.headers['account'] = account
                //     config.responseType = 'blob'
                // }
                // axios.post(`${baseURL}icall/exportIcall`, params, config).then(res => {
                //     let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
                //     let downloadElement = document.createElement('a')
                //     let href = URL.createObjectURL(blob)
                //     downloadElement.href = href
                //     downloadElement.download = 'chart.xls'
                //     document.body.appendChild(downloadElement)
                //     downloadElement.click()
                //     document.body.removeChild(downloadElement)
                //     window.URL.revokeObjectURL(href)
                // }).catch(e => {
                //     let reader = new FileReader()
                //     reader.onload = event => {
                //         let content = reader.result
                //         let json = JSON.parse(content)
                //         if (json) {
                //             this.$message.error(json.message)
                //         } else {
                //             this.$message.error('导出失败')
                //         }
                //     }
                //     reader.readAsText(e.response.data)
                // })
            },
        }
    }
</script>

<style scoped>
    .success{color: #67C23A;}
    .error{color: #F56C6C;}
</style>
